<template>
    <div style="padding-left: 17px;">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-service"></i> 客服
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div id="wangeditor">
            <!-- 会话列表 -->
            <div class="SessionList">
                <header class="list-head-left">
                    <div class="list-chart">
                        <img
                            src="http://pic.51yuansu.com/pic3/cover/02/79/99/5a4b45c6d70f4_610.jpg"
                        />
                    </div>
                    <div class="Choice">
                        <span>{{nickname}}</span>
                    </div>
                </header>
                <div>
                    <el-tabs v-model="message" stretch>
                        <el-tab-pane
                            v-bind:class="{ active: isActive }"
                            :label="`会话(${unread.length})`"
                            name="first"
                        >
                            <!-- <div v-for="(unreads,inde)  in unread" :key="unreads.title">
                                <div class="option" @click="service">
                                    <span>{{unreads.title}}</span>
                                    <span style="text-align: center">{{unreads.date}}</span>
                                    <el-button size="small" @click="handleRead(inde)">X</el-button>
                                </div>
                            </div>-->

                            <el-table
                                :data="unread"
                                :show-header="false"
                                @row-click="service"
                                :message="pass"
                            >
                                <el-table-column>
                                    <template slot-scope="scope">
                                        <span class="message-title">{{scope.row.title}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column>
                                    <template slot-scope="scope">
                                        <el-badge class="mark" :value="scope.row.mumber" />
                                    </template>
                                </el-table-column>
                                <el-table-column width="80">
                                    <template slot-scope="scope">
                                        <el-button size="small" @click="handleRead(scope.$index)">X</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane
                            v-bind:class="{ active: isActive }"
                            :label="`历史(${read.length})`"
                            name="second"
                        >
                            <template v-if="message === 'second'">
                                <el-table
                                    :data="read"
                                    :show-header="false"
                                    :message="pass"
                                    @row-click="service"
                                >
                                    <el-table-column>
                                        <template slot-scope="scope">
                                            <span class="message-title">{{scope.row.title}}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="date"></el-table-column>
                                    <el-table-column width="80"></el-table-column>
                                </el-table>
                            </template>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
            <!-- 聊天界面 -->
            <div class="Interface">
                <Chat :message="pass"></Chat>
            </div>
        </div>
    </div>
</template>
<script>
// import E from 'wangeditor';

import Chat from './chat.vue';
export default {
    // name: 'Editor',
    components: {
        Chat
    },
    data() {
        return {
            editor: null,
            editorContent: '', //富文本值
            message: 'first', //绑定值
            showHeader: false,
            nickname: $cookies.get('tokenpa').title,
            unread: [], //会话
            read: [], //历史记录
            isActive: true,
            value: '选项1',
            pass: ''
        };
    },
    mounted() {
        window.listyouke = this.listyouke;
        window.uid = this.$cookies.get('tokenuser');
    },
    methods: {
        listupdate(_uid) {
            console.log('测试', _uid);
            //改变列表消息提示说明
            this.clearup(_uid, 1);
        },
        clearup(_uid, _t = 0) {
            for (const key in this.unread) {
                if (this.unread[key]['title'] == _uid) {
                    if (_t == 0) {
                        this.unread[key]['mumber'] = 0;
                    } else {
                        this.unread[key]['mumber'] = this.unread[key]['mumber'] + 1;
                    }
                }
            }
        },
        //移入历史记录
        handleRead(index) {
            const item = this.unread.splice(index, 1);
            //console.log(inde);

            this.read = item.concat(this.read);
        },
        handleDel(index) {
            const item = this.read.splice(index, 1);
            this.recycle = item.concat(this.recycle);
        },
        handleRestore(index) {
            const item = this.recycle.splice(index, 1);
            this.read = item.concat(this.read);
        },
        service(row) {
            this.pass = row.title;
            //点击用户显示历史消息.
            var data = JSON.stringify({
                type: 'record', //记录消息类型
                cid: row.title, //用户
                visit: window.uid //推送到客服
            });
            ws.send(data);
            this.clearup(row.title);
            // this.pass = scope.$index;
        },
        listyouke(obj, _stay = 0) {
            var data = {};
            var dat = [];
            let odata = [];

            for (let index = 0; index < obj.length; index++) {
                if (obj.length > 0) {
                    if (obj[index]['title'] != 'undefined') {
                        if (this.$cookies.get('tokenuser') != obj[index]['title']) {
                            if ('list' + this.$cookies.get('tokenuser') != obj[index]['title']) {
                                odata[index] = { title: obj[index]['title'], mumber: obj[index]['mumber'] };
                            }
                        }
                    }
                }
            }
            //判断当前操作类型
            if (_stay == 0) {
                //离线
                this.read = odata;
            } else {
                //在线
                this.unread = odata;
            }
        }
    }
};
//端口
const wsPort = 9437;
//通讯地址
const hostname = '127.0.0.1';
//创建一个对象
const ws = new WebSocket(`ws://${hostname}:${wsPort}`);

//连接建立时触发
ws.onopen = () => {
    //进入客服页面提示.
    var data = JSON.stringify({
        type: 'list', //消息类型
        uid: 'list' + window.uid,
        cid: window.uid,
        init: 'kefu'
    });
    ws.send(data);
    console.log('列表' + data);
};

//客户端接收服务端数据时触发
ws.onmessage = msg => {
    //接收数据，然后将数据展示到界面上
    var da = JSON.parse(msg.data);
    console.log(da.data.stay);

    //是否返回列表数据
    if (da.type == 'list') {
        //在线
        listyouke(da.data.stay, 1);
        //离线
        listyouke(da.data.nostay, 0);
    }
};

//通信发生错误时触发
ws.onerror = error => {};

//连接关闭时触发
ws.onclose = () => {};
</script>
<style scoped>
.active {
    width: 100%;
    padding: 0;
    text-align: center;
}
#wangeditor {
    width: 100%;
    height: calc(100vh - 170px);
    position: relative;
    background-color: rgb(255, 255, 255);
}
/*会话列表 */
.option {
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    border-bottom: 1px solid rgb(230, 230, 230);
    text-align: left;
    font-size: 14px;
}
.option span {
    margin-right: 60px;
}
#wangeditor .SessionList {
    width: 300px;
    height: 100%;
    float: left;
    border-right: 1px solid rgb(199, 199, 199);
}
.list-head-left {
    width: 100%;
    height: 100px;
    border-bottom: 1px solid rgb(219, 219, 219);
}
.list-chart {
    width: 70px;
    height: 70px;
    overflow: hidden;
    padding: 10px;
    float: left;
}
.list-chart img {
    width: 100%;
    height: 70px;
}
.Choice {
    padding: 15px;
    float: left;
}
.Choice > span {
    height: 35px;
    line-height: 35px;
    color: darkgray;
}

/*聊天界面 */
#wangeditor .Interface {
    width: calc(100% - 301px);
    height: 100%;
    float: left;
}
</style>